<script setup>
import RecordItem from '@/views/components/RecordItem.vue'
import { onBeforeMount, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { setDocumentTitle } from '@/utils/util.js'

const router = useRouter()
const route = useRoute()

const state = reactive({
    tabList: ['题目', '提交记录'],
    currentTab: '提交记录',
    examId: 0,
    id: 0,
    subjectType: 0,
    seriesType: ''
})

onBeforeMount(() => {
    const query = route.query
    state.examId = query.examId ? query.examId : 0
    state.id = query.id ? query.id : 0
    state.subjectType = parseInt(query.subjectType ? query.subjectType : 0)
    state.seriesType = query.seriesType ? query.seriesType : ''

    if (state.subjectType === 1) {
        setDocumentTitle(state.seriesType + ' ' + '听力')
        state.tabList = ['题目', '提交记录']
    } else if (state.subjectType === 2) {
        setDocumentTitle(state.seriesType + ' ' + '阅读')
        state.tabList = ['文章', '题目', '提交记录']
    }
})

const changeTab = (item) => {
    if (item !== '提交记录') {
        router.replace({
            name: 'exam',
            query: {
                id: state.id,
                tab: item,
                title: document.title,
                currentTime: route.query?.currentTime || undefined
            }
        })
    }
}
</script>

<template>
    <div>
        <div class="header" v-if="state.id">
            <div class="class-list">
                <div
                    class="class-item"
                    :class="{ active: item === state.currentTab }"
                    v-for="(item, index) in state.tabList"
                    :key="index"
                    @click="changeTab(item)">
                    {{ item }}
                </div>
            </div>
        </div>
        <div class="record-content" v-if="state.examId">
            <RecordItem :exam-id="state.examId"></RecordItem>
        </div>
    </div>
</template>

<style scoped lang="scss">
.header {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 1;
    background-color: #ffffff;
    width: 100%;
}
.class-list {
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    .class-item {
        padding: 0 15px;
        color: #999999;
        position: relative;
        text-align: center;
    }
    .active {
        color: #666666;
        font-weight: bold;
        font-size: 1rem;
    }
    .active::before {
        position: absolute;
        left: calc(50% - 9px);
        text-align: center;
        bottom: -4px;
        content: ' ';
        width: 18px;
        height: 3px;
        background: #fd453d;
        border-radius: 2px;
    }
}
</style>
